<template>
	<view class="content">
		<placeAndSearch />
		<txtBox :text="text" />
		<view class="willApplication">
			<view class="itemTitle f16">
				为何选择“时运高”锁具服务
			</view>
			<view class="item f14">
				<icon class="iconfont iconduiquan" type=""></icon><text>公安备案，实体经营</text>
			</view>
			<view class="item f14">
				<icon class="iconfont iconduiquan" type=""></icon><text>持续优化的体系，不断提升的意识 </text>
			</view>
			<view class="item f14">
				<icon class="iconfont iconduiquan" type=""></icon><text>技术稳，设备齐，来得快</text>
			</view>
			<view class="item f14">
				<icon class="iconfont iconbaoxiuka" type=""></icon><text>提供<text class="red">电子保修卡</text>，售后无忧</text>
			</view>
			<view class="item f14">
				<icon class="iconfont iconyoujiantou" type="">
				</icon><text>选择时运高，时时运势高</text>
			</view>
		</view>
		<view class="bottomBox">
			<view class="title">
				<view class="logo">
					<image src="../../../static/img/kaisuo.png" alt="">
				</view>
				<view class="text">
					<view class="top">时运高<text class="f12" style="margin-left: 10px;">LuckyLock.cn</text> </view>
					<view class="introduce f14">开锁换锁 家居 /商业 /汽车 /智能等</view>
				</view>
			</view>
			<view class="bottons">
				<button class="send" @click="send">发送位置</button>
				<button class="phone" @click="open">客服电话</button>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupBox">
				<view class="phonenumber" @click="callPhone">
					<icon class="iconfont icon-telephone f22" type=""></icon>
					<text class="number f16">
						<text class="head">188</text>
						77 183 183
					</text>
				</view>
				<view class="phonenumber" @click="callPhone">
					<icon class="iconfont icon-telephone f22" type=""></icon>
					<text class="number f16">
						<text class="head">188</text>
						77 183 183
					</text>
				</view>
				<view class="cancel f18" @click="close">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import placeAndSearch from '@/components/placeAndSearch/placeAndSearch.vue';
	import txtBox from '@/components/txtBox/txtBox.vue';
	export default {
		components: {
			placeAndSearch,
			txtBox
		},
		data() {
			return {
				text: "好运伴你，Lucky Lock",
				options: "",
				islogin: false
			}
		},
		onLoad(option) {
			console.log('sendAddress', option)
			this.options = option
		},
		onShow() {
			this._isLogin();
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			send() {
				//是否登录 登录
				if (this.islogin) { //登录
					uni.navigateTo({
						url: "../placeInfo/placeInfo?s=0&svcId=" + this.options.svcId
					})
				} else { //未登录
					this.getUserProfile(false, (userInfo) => {
						uni.navigateTo({
							url: "../placeInfo/placeInfo?s=0&svcId=" + this.options.svcId
						})
					})
				}
			},
			//是否登录
			_isLogin() {
				var that = this;
				wx.checkSession({
					success: (res) => {
						console.log("处于登录状态");
						let token = uni.getStorageSync('User_token');
						let tokenTime = uni.getStorageSync('User_tokenTime');
						let nowDate = new Date().getTime();
						if (token) {
							let tT = new Date(tokenTime).getTime()
							if (nowDate >= tT) {
								console.log('token过期')
								this.islogin = false
							} else {
								this.islogin = true
								console.log('token正常，授权正常', tokenTime)
							}
						}
					},
					fail: (res) => {
						this.islogin = false
						console.log("需要重新登录");
					}

				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '18877183183' //仅为示例
				});
			}
		}
	}
</script>

<style lang="less">
	@import '@/common/common.less';

	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		height: 100%;

		.willApplication {
			width: 100%;
			height: 60%;
			background-color: #FFFFFF;
			border-top: 1px solid #CCCCCC;
			padding-left: 60rpx;

			.itemTitle {
				color: @primary-color;
				width: 100%;
				margin: 25px 0px;
			}

			.item {
				color: #555555;
				margin: 15px 0px;

				.iconfont {
					margin-right: 10px;
					color: @primary-color;
				}

				.red {
					color: #d9001b;
				}
			}
		}

		.bottomBox {
			width: 100%;
			height: 164px;
			background-color: #FFFFFF;
			border-top: 10px solid #f2f2f2;
			padding-top: 20px;

			.title {
				display: flex;
				flex-direction: row;

				.logo {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					background-color: @primary-color;
					margin-left: 22px;
					margin-right: 22px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					.top {
						color: @primary-color;
						margin-bottom: 5px;
					}

					.introduce {
						color: #555555;
					}
				}
			}

			.bottons {
				display: flex;
				flex-direction: row;
				margin-top: 20px;

				.send {
					background-color: #ffffff;
					width: 130px;
					// font-weight: bold;
					color: #666666;
				}

				.phone {
					width: 130px;
					color: #FFFFFF;
					background-color: @primary-color;
				}
			}
		}

		.popupBox {
			height: 180px;
			background-color: #FFFFFF;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;

			.phonenumber {
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-bottom: 1px solid #CCCCCC;

				.iconfont {
					color: @primary-color;
					margin-right: 20px;
				}

				.number {
					.head {
						color: @primary-color;
					}
				}
			}

			.cancel {
				text-align: center;
				height: 50px;
				line-height: 50px;
			}
		}
	}
</style>
